<template>
    <div class="page-index">
        <MainLayoutTable>
            <template #action>
                <ButtonGroup>
                    <Button type="primary">
                        <Icon type="ios-arrow-back"></Icon>
                        添加
                    </Button>
                    <Button type="primary">
                        查询
                        <Icon type="ios-arrow-forward"></Icon>
                    </Button>
                </ButtonGroup>
            </template>
            <template #table>
                <Table border :columns="columns2" :data="data3" ref="table" :height="tableHeight">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
                        <Button type="error" size="small" @click="remove(index)">编辑</Button>
                    </template>
                </Table>
            </template>
            <template #page>
                <Page :total="100" show-elevator />
            </template>
        </MainLayoutTable>
    </div>
</template>

<script>
export default {
    name: 'Index',
    data() {
        return {
            columns2: [
                {
                    title: '名字',
                    key: 'name',
                    width: 150,
                    fixed: 'left'
                },
                {
                    title: '年龄',
                    key: 'age',
                    width: 100
                },
                {
                    title: '省',
                    key: 'province',
                    width: 100
                },
                {
                    title: '城市',
                    key: 'city',
                    width: 100
                },
                {
                    title: '地址',
                    key: 'address',
                    minWidth: 200
                },
                {
                    title: '邮编',
                    key: 'zip',
                    width: 100
                },
                {
                    title: '操作',
                    slot: 'action',
                    fixed: 'right',
                    width: 160
                }
            ],
            data3: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    province: 'America',
                    city: 'New York',
                    zip: 100000
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'Washington, D.C. No. 1 Lake Par',
                    province: 'America',
                    city: 'Washington, D.C.',
                    zip: 100000
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    province: 'Australian',
                    city: 'Sydney',
                    zip: 100000
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    province: 'Canada',
                    city: 'Ottawa',
                    zip: 100000
                }
            ],
            tableHeight: 0
        };
    },
    mounted() {
        this.$nextTick(() => {
            let dd = window.innerHeight - this.$refs.table.$el.offsetTop - 194;
            console.log('ddd');
            console.log(dd);
            this.tableHeight = dd;
        });
    }
};
</script>

<style lang="scss">
.page-index {
    .yueui-box {
        border: 1px solid #dddddd;
    }
}
</style>
